<template>
  <div class="census-manage">
    <basic-container>
      <avue-crud
        :table-loading="loading"
        ref="crud"
        :option="option"
        :data="data"
        :page.sync="page"
        @on-load="onLoad"
        :search.sync="search"
        @selection-change="selectionChange"
        @refresh-change="onLoad"
        @search-change="searchChange"
        v-model="item"
      >
        <template slot-scope="{ type, size, row }" slot="menu">
          <el-button
            icon="el-icon-check"
            :size="size"
            :type="type"
            @click="openTeamReport(row)"
            v-if="
              row.gaugeId ==
                '000000_1625292954117_3d59ff02dbb74bb7b7bd247cf6fa4787' ||
              row.gaugeId ==
                '314777_1633069375781_f52ede3a08f140f680f040b2df8adba7'
            "
            >查看团体报告</el-button
          >
          <el-button
            icon="el-icon-view"
            :size="size"
            :type="type"
            @click="getViewByProject(row)"
            >查看题目列表</el-button
          >
        </template>
        <!-- <template slot="addsForm">
          <el-row>
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
            </el-checkbox-group>
          </el-row>
        </template> -->

        <template slot="guidanceNoteForm">
          <el-row>
            <tinymce-editor
              v-model="guidanceNote"
              ref="editor"
            ></tinymce-editor>
          </el-row>
        </template>
      </avue-crud>
    </basic-container>
    <el-dialog
      title="普查题目列表"
      :visible.sync="answerDetailDialogView"
      class="dialogInfoCss"
    >
      <div class="container">
        <answerDetailDialog :answerData="answerData"></answerDetailDialog>
      </div>
    </el-dialog>
    <el-dialog
      v-if="teamReport"
      title="团体预警报告"
      :visible.sync="teamReport"
      class="dialogInfoCss"
    >
      <sampleCount
        :sampleParams="sampleParams"
        @close="teamReport = false"
      ></sampleCount>
    </el-dialog>
  </div>
</template>

<script>
import { getCensusList, getViewByProjectId } from "@/api/census";
import answerDetailDialog from "./groupReport/answerDetailDialog";
import sampleCount from "./groupReport/sampleCount";
import { getSampleTotal } from "@/api/census/report";
import TinymceEditor from "../../components/tinymce-editor/tinymce-editor";
export default {
  name: "CensusManage",
  components: { answerDetailDialog, TinymceEditor, sampleCount },
  data() {
    return {
      teamReport: false,
      item: {},
      user: {},
      search: {},
      answerData: [],
      sampleParams: {},
      projectId: "",
      answerDetailDialogView: false,
      selectionList: [],
      promote: true,
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0,
      },
      option: {
        // addBtnText: '添加类别',
        delBtnText: "删除",
        excelBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        border: true,
        selection: true,
        index: true,
        expandLevel: 3,
        headerAlign: "left",
        align: "left",
        tree: false,
        labelWidth: 120,
        menuWidth: 300,
        column: [
          {
            label: "普查名称",
            overHidden: true,
            searchLabelWidth: 120,
            prop: "projectName",
            formslot: true,
            searchSpan: 8,
            search: true,
            order: 1,
            rules: [
              {
                required: true,
                message: "请输入普查名称",
                trigger: "click",
              },
            ],
          },
          {
            label: "适用人群",
            prop: "grade",
            type: "checkbox",
            searchSpan: 8,
            search: true,
            overHidden: true,
            searchLabelWidth: 120,
            order: 2,
            span: 24,
            props: {
              label: "gradeName",
              value: "gradeNo",
            },
            dicUrl: `/api/blade-system/grade/list`,
          },
          // {
          //   label: "发布状态",
          //   span: 24,
          //   prop: "status",
          //   type: "select",
          //   searchLabelWidth: 120,
          //   searchSpan: 8,
          //   search: true,
          //   addDisplay: false,
          //   editDisplay: false,
          //   dicData: [
          //     {
          //       label: "已上架",
          //       value: 1,
          //     },
          //     {
          //       label: "待上架",
          //       value: 0,
          //     },
          //   ],
          // },
          // {
          //   label: "项目图片",
          //   type: "upload",
          //   listType: "picture-img",
          //   propsHttp: {
          //     res: "data",
          //     url: "fileUrl",
          //   },
          //   canvasOption: {
          //     text: "blade",
          //     ratio: 0.1,
          //   },
          //   action: "/api/blade-file/file/uploadFile",
          //   tip: "只能上传jpg/png用户头像，且不超过500kb",
          //   span: 12,
          //   row: true,
          //   prop: "classesName",
          // },
          {
            label: "测评完成日期",
            type: "date",
            searchSpan: 8,
            search: true,
            searchLabelWidth: 120,
            prop: "requestDate",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            order: 11,
            rules: [
              {
                required: true,
                message: "请输测评完成日期",
                trigger: "blur",
              },
            ],
          },
        ],
      },
      data: [],
      guidanceNote: "",
      loading: true,
    };
  },
  mounted() {
    let guidanceNote = ""; // 请求后台返回的内容字符串
    this.str = this.escapeStringHTML(guidanceNote);
  },
  computed: {
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.projectId);
      });
      return ids.join(",");
    },
  },
  created() {
    this.onLoad();
  },
  methods: {
    async onLoad(page = this.page, params = {}) {
      if (window.localStorage.getItem("saber-userInfo")) {
        params.tenantId = JSON.parse(
          window.localStorage.getItem("saber-userInfo")
        ).content.tenantId;
      }
      //模拟分页
      // this.page.total = 40;
      const {
        data: { data },
      } = await getCensusList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      );
      data.records.map((rowData) => {
        rowData.grade = rowData.gradId.split(",");
        rowData.requestDate = rowData.requestDate.split(" ")[0] || "";
      });
      this.loading = false;
      this.data = data.records;
      // console.log(this.data);
      this.page.total = data.total;
    },
    async searchChange(params, done) {
      await this.onLoad(this.page, params);
      done();
    },
    getViewByProject(row) {
      this.answerData = [];
      getViewByProjectId({ projectId: row.projectId }).then((result) => {
        if (result.data.code == "200") {
          if (result.data.data.length) {
            this.answerData = result.data.data;
            this.answerDetailDialogView = true;
          } else {
            this.$message.warning("没有可以查看的题目！");
          }
        }
      });
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    goToCustomList(row) {
      this.$router.push({
        name: "自定义设置",
        query: { projectId: row.projectId },
      });
    },
    escapeStringHTML(str) {
      //把实体格式字符串转义成HTML格式的字符串
      str = str.replace(/&lt;/g, "<");
      str = str.replace(/&gt;/g, ">");
      return str;
    },
    openTeamReport(row) {
      getSampleTotal({ id: row.projectId }).then((result) => {
        if (result.data.code == "200") {
          if (result.data.data) {
            this.sampleParams.sampleTotal = result.data.data;
            this.sampleParams.projectId = row.projectId;
            this.sampleParams.gaugeId = row.gaugeId;
            this.teamReport = true;
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.census-manage {
  .container {
    height: 70vh;
    overflow-y: auto;
  }
  .dialogInfoCss {
    overflow-y: hidden;
    margin-top: -50px;
    // margin-bottom: 40px;
  }
}
</style>
